<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="5">
            <el-form-item label="商品">
              <el-select
                v-model="searchData.productName"
                placeholder="请选择"
                filterable
                style="width:100%;"
                value-key="productID"
                @change="selectSubjectItem($event)"
                clearable
              >
                <el-option
                  v-for="item in selectNameList"
                  :key="item.productID"
                  :label="item.productName"
                  :value="{
                    productName: item.productName,
                    productID: item.productID
                  }"
                >
                  <span style="float: left">{{ item.productName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.productID
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="searchData.startTradingDay"
                type="date"
                placeholder="选择日期"
                style="width:100%;"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchData.endTradingDay"
                type="date"
                placeholder="选择日期"
                style="width:100%;"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="margin:5px 20px 0 0;">
            <el-button type="primary" size="mini" @click="search">
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
          <el-col :span="2" style="margin:5px 20px 0 0;">
            <el-button type="default" size="mini">
              <d2-icon name="upload" />
              导出
            </el-button>
          </el-col>
          <el-col :span="2" style="margin-top:5px">
            <el-button type="default" size="mini" @click="searchHis">
              <d2-icon name="search" />
              历史数据
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">仓单数据</p>
      </template>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="55"> </el-table-column>
        <el-table-column
          prop="productName"
          label="商品"
          sortable
        ></el-table-column>
        <el-table-column
          prop="wareVolumeUnit"
          label="仓单数量"
          sortable
        ></el-table-column>
        <el-table-column
          prop="wareDiff"
          label="仓单变化"
          sortable
        ></el-table-column>
        <el-table-column
          prop="wareChg"
          label="变化幅度"
          sortable
        ></el-table-column>
        <el-table-column
          prop="conversion"
          label="仓单折盘面手数" width="145"
          sortable
        ></el-table-column>
        <el-table-column
          prop="tradingDay"
          label="日期"
          sortable
        ></el-table-column>
      </el-table>
    </el-card>
    <!-- 仓单历史弹框 -->
    <el-dialog
      :visible.sync="getA"
      v-if="getA"
      :append-to-body="true"
      :title="multipleSelection.productName + ' 历史数据'"
    >
      <el-card shadow="never" class="d2-mb">
        <div class="inner">
          <ve-line :data="chartData" :extend="chartExtend"></ve-line>
          <ve-histogram :data="chartData1"></ve-histogram>
        </div>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="closeBtn"
          size="mini"
          style="margin-left:92%"
          >导出</el-button
        >
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { quotWare } from "@/api/url_info.js";
export default {
  //仓单数据
  name: "warehouse",
  components: {},
  data() {
    this.chartExtend = {
      series: {
        symbol: "none"
      }
    };
    return {
      searchData: {
        startTradingDay: "",
        endTradingDay: "",
        productID: "",
        productName: ""
      },
      chartData: {
        columns: ["日期", "仓单数量"],
        rows: []
      },
      chartData1: {
        columns: ["日期", "增减变化"],
        rows: []
      },
      getA: false,
      row: null,
      tableData: [],
      selectNameList: [],
      multipleSelection: []
    };
  },
  created() {
    this.handle_name();
    this.search();
  },
  methods: {
    // 查询商品
    handle_name() {
      quotWare({ type: "commodity" })
        .then(res => {
          this.selectNameList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectNameList[i] = {
              productName: data1[i]["productName"],
              productID: data1[i]["ProductID"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    selectSubjectItem(event) {
      this.searchData.productID = event.productID;
      this.searchData.productName = event.productName;
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.wareInfo();
    },
    // 查询现货行情
    search() {
      this.wareInfo();
    },
    //网格信息
    wareInfo() {
      this.multipleSelection.productName = "";
      this.multipleSelection.productID = "";
      let params = {
        type: "now",
        startTradingDay: this.searchData.startTradingDay,
        endTradingDay: this.searchData.endTradingDay,
        productID: this.searchData.productID,
        productName: this.searchData.productName
      };
      quotWare(params)
        .then(res => {
          this.tableData = [];
          let data = res.result;
          for (let i = 0; i < data.length; i++) {
            this.tableData[i] = {
              productName: data[i]["productName"],
              wareVolumeUnit: data[i]["wareVolumeUnit"],
              wareDiff: data[i]["wareDiff"],
              wareChg: data[i]["wareChg"],
              conversion: data[i]["conversion"],
              productID: data[i]["productID"],
              tradingDay: data[i]["tradingDay"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //查看历史行情
    async searchHis() {
      if (this.multipleSelection.productID) {
        this.getA = true;
        let params = {
          type: "his",
          productName: this.multipleSelection.productName,
          productID: this.multipleSelection.productID
        };
        await quotWare(params)
          .then(res => {
            let chartData = [];
            let chartData1 = [];
            let data = res.result;
            for (let i = 0; i < data.length; i++) {
              chartData[i] = {
                日期: data[i]["tradingDay"],
                仓单数量: data[i]["wareVolume"]
              };
            }
            for (let i = 0; i < data.length; i++) {
              if (data[i]["wareDiff"] == -999999) {
                data[i]["wareDiff"] = 0;
              }
              chartData1[i] = {
                日期: data[i]["tradingDay"],
                增减变化: data[i]["wareDiff"]
              };
            }
            this.chartData.rows = chartData;
            this.chartData1.rows = chartData1;
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    }
  }
};
</script>
<style lang="scss"></style>
